iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 25
1
自我挑戰組

從JS到React的前端入門實作系列 第 25

Day25:拆組組件(5),新增輸入值到收尋欄並且收尋

  • 分享至 

  • xImage
  •  

今天目的

今天要新增資料到收尋欄裡,這樣就可以增加收尋資料。

畫面部分

新增按鈕,輸入值後可以新增資料。

  render() {
    const {searhItem,handleContent,addItem} = this,
    {content} = this.state;

    
    return(
      <div>
        <label>文字輸入</label>
        <input type="text" 
          placeholder="addItem..."
          value={content}  
          onChange={handleContent}
           />
            <button onClick={addItem}>addItem</button> 
        <br/>
       <Searchbar  onsearh ={searhItem}/> {/* 從子組件 接收onsearh事件 */}
       <Todolist item={this.state.item} />
      </div>
    );
  }
}

函數addItem()

用來處理新增資料

  addItem = () => { //建立一個陣列把輸入值加入陣列最後把資料打到畫面上
    this.state.data.push(this.state.content); //把值存到陣列
    let currentMessage=this.state.item;
    console.log(`目前item : ${currentMessage}`); 
    this.setState({ //改變內部變數不然會少一個炫覽
      item:currentMessage,
      searhitem:currentMessage //用來備份資料
    });
  }

資料部分

新增備份資料,跟當前輸入

 constructor(props) {
    super(props);
    this.state = {
      data:[
        'apple',
        'banana',
        'orange',
        'purple',
        'seal',
        'egg',
        'mouse'
      ], 
      item:[],
      content:'',
      searhitem:[],//備份資料
    };//內部自定義的變數

  }

完成新增

這裡的操作是,新增資料,在收尋就可以看新增資料在收尋欄裡了。
https://ithelp.ithome.com.tw/upload/images/20191010/201155057g1ebLS6ri.png


參考資料:自己


上一篇
Day24:拆組組件(4),收尋文字放入另一個組件,並且新增輸入框
下一篇
Day26:拆解組件(6),優化輸入
系列文
從JS到React的前端入門實作30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言